<template>
  <div class="home">
    <van-nav-bar
      title="域外列表"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="content" validate-first v-for="(item,index) in result" :key="index">
      <!-- 通过 pattern 进行正则校验 -->
      <van-field input-align="right"
        label="姓名"
        readonly
        v-model="item.name"
        name="pattern"
      />
      <van-field input-align="right"
        label="性别"
        readonly
        v-model="item.sex"
        name="pattern"
      />
      <van-field input-align="right"
        label="证件类型"
        readonly
        v-model="item.card_type"
        name="pattern"
      />
      <van-field input-align="right"
        :label="label"
        readonly
        v-model="item.card_no"
        name="pattern"
      />
      <van-field input-align="right"
        label="出生日期"
        readonly
        v-model="item.bithday"
        name="pattern"
      />
      <van-field input-align="right"
        label="户口所在地"
        readonly
        v-model="item.registered_residence"
        name="pattern"
      />
      <van-field input-align="right"
        label="联系方式"
        readonly
        v-model="item.mobile"
        name="phoneRules"
      />
      <van-field input-align="right"
        label="目的地"
        readonly
        v-model="item.address"
        name="pattern"
      />
      <van-field input-align="right"
        label="出发城市"
        readonly
        v-model="item.departCity"
        name="pattern"
      />
      <van-field input-align="right"
        label="航班号"
        readonly
        v-model="item.flightNumber"
        name="pattern"
      />
      <van-field input-align="right"
        label="航班座位号"
        readonly
        v-model="item.flightSeat"
        name="pattern"
      />
      <van-field input-align="right"
        label="航班类型"
        readonly
        v-model="item.flightType"
        name="pattern"
      />
    </div>
    <!-- 证件类型 -->
    <van-popup v-model="showCertificate" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showCertificate = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 日期 -->
    <van-popup v-model="showDate"  round position="bottom">
      <van-datetime-picker
      @confirm="getConfirm"
      @cancel="showDate = false"
      :min-date="minDate"
      type="date"
      title="选择年月日"
      />
    </van-popup>

  </div>
</template>

<script>
import { getAbroadEnterdlPlatformList } from '@/api/gov/home'
export default {
  data () {
    return {
      result: [],
      minDate: new Date(1980, 0, 1),
      showDate: false, // 选择生日
      label: '身份证号',
      columns: ['身份证', '护照', '军官证', '港澳通行证'],
      formData: {
        card_type: '证件类型', // 证件类型
        name: '姓名', // 姓名
        card_no: '211324198801011234', // 身份证
        sex: '性别', // 性别
        mobile: '13566666666',
        birthday: '', // 出生日期
        registered_residence: '户口所在地', // 户口所在地
        address: '目的地', // 目的地
        departCity: '出发城市', // 出发城市
        flightNumber: '航班号', // 航班号
        flightSeat: '航班座位号', // 航班座位号
        flightType: '航班类型', // 航班类型
        enter_type: ''
      },
      pickerShow: false, // 时间选择
      showCertificate: false, // 证件类型
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
    }
  },
  mounted () {
    getAbroadEnterdlPlatformList({
      pageNo: 1,
      pageSize: 20
    }).then(res => {
      console.log(res, '域外')
      this.result = res.data.data.results
    })
  },
  methods: {
    getConfirm (value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.birthday = yy + '-' + mm + '-' + dd
      this.showDate = false
    },
    onConfirm (value) {
      this.label = value
      this.formData.card_type = value
      this.showCertificate = false
    }

  }
}
</script>
<style lang="less" scoped>
.home {
  img{
    width: 100%;
  }
  .dialog-container{
    height: 70vh;
    overflow-y: auto;
  }
  .get-area{
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }
  /deep/.van-field__label{
    width: 8em;
  }
  /deep/.van-field__error-message{
    text-align: right;
  }
  .title{
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }
  .container{
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;
    .item{
      margin: 10px;
    }
  }
}
.up-and-down{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}
.content{
  border-bottom: 10px solid #ccc;
}
</style>
